<template>
  <view class="couponList-box">
    <view class="couponList-tips">* 购买礼包后，卡劵会在48小时内发至会员卡内。</view>
    <view class="couponList-tips" v-if="setCouponList.length > 0">*
      使用规则：到店向工作人员出示该会员卡，并说明使用哪张礼劵，工作人员核销即可。</view>
    <view class="couponList-tips" v-else>* 您登录的手机号码未找到会员卡，可前往 “会员卡开通” 提交资料申请，
      或“联系客服”开通会员卡。</view>

    <!-- 券列表 -->
    <template v-if="setCouponList.length > 0">
      <view class="couponList" :key="item.id" @click="goCouponDetail(item)" v-for="item in setCouponList">
        <view class="couponList__top">
          <view class="couponList__top__id">卡号： {{ item.number }}</view>
          <view class="couponList__top__num">
            <span>{{ item.couponRelations.length }} <i>劵</i></span>
          </view>
          <!-- <view class="couponList__top__name"> {{ item.username }} </view> -->
        </view>
        <view class="couponList__top">
          <view class="couponList__top__name">
            车牌号码<i v-for="itemCar1 in item.cars" :key="itemCar1.id">{{
              itemCar1.licensePlate
            }}</i>
          </view>
          <view class="couponList__top__name">
            底盘号<i v-for="itemCar2 in item.cars" :key="itemCar2.id">{{
              itemCar2.chassisNumber
            }}</i>
          </view>
        </view>
        <view class="couponList__main">
          <view class="couponList__main__left" v-if="item.couponRelations.length > 0">
            <view class="couponList__main__left__text" v-for="itemC in item.couponRelations.slice(0, 5)" :key="itemC.id">
              {{ itemC.couponName }}
            </view>
            <view class="couponList__main__left__text" v-if="item.couponRelations.length > 5">...</view>
          </view>
          <view class="couponList__main__tips" v-else>暂无礼劵</view>
          <view class="couponList__main__right">
            <image style="width:100rpx;" mode="widthFix" src="@/Shop/static/icon_klm_coupon2.png"></image>
          </view>
        </view>
        <view class="couponList__bottom">
          服务门店： {{ item.companyName }}
        </view>
      </view>
      <view style="height: 40rpx;"></view>
    </template>
    <view v-else>
      <u-empty mode="search" text="未找到会员卡" icon="https://www.kamlung.net/images/other/search1.png">
      </u-empty>
      <view class="couponList-bottom">
        <view class="couponList-bottom__btn" @click="goCardsReg">会员卡开通</view>
        <view class="couponList-bottom__btn" @click="goContact">联系客服开卡</view>
      </view>
    </view>

    <!-- 客服名片组件 -->
    <u-popup round="5" closeable :show="show" mode="center" bgColor="#f5f6f8" @close="show = false"
      :safeAreaInsetBottom="false">
      <view class="popup_inner">
        <PosterCanvas ref="mycanvas" :posInfo="posInfo"></PosterCanvas>
      </view>
    </u-popup>
  </view>
</template>

<script>
import _ from 'lodash'
import { mapMutations, mapState } from 'vuex'
import { couponByPhoneApi} from '@/API/Shop'
export default {
  name: 'CouponList',
  data() {
    return {
      show: false,
      posInfo: {},
      imageBody: '',
      currIndex: 0,
      baseUrl: this.$baseUrl,
      // 优惠券列表
      // couponByPhone: [],
      // 锦讯公司列表
      // companyList: [],
    }
  },
  computed: {
    ...mapState(['loginInfo', 'centersList', 'couponByPhone', 'brandInfo']),
    // 标签栏
    tableList() {
      let temp = []
      let centersList = this.centersList
      let couponList = this.couponByPhone
      if (couponList) {
        for (let key in couponList) {
          if (couponList[key].length) {
            for (let j = 0; j < centersList.length; j++) {
              if (key == centersList[j].companyId) {
                temp.push({
                  key,
                  id: j,
                  name: centersList[j].simpleName.split('-')[0]
                })
              }
            }
          }
        }
      }
      return temp
    },
    // 为券列表设置公司名
    setCouponList() {
      let centersList = this.centersList
      let couponList = _.cloneDeep(this.couponByPhone)
      if (couponList) {
        for (let index = 0; index < couponList.length; index++) {
          for (let i = 0; i < centersList.length; i++) {
            if (couponList[index].companyId == centersList[i].companyId) {
              couponList[index].companyName = centersList[i].simpleName
              break
            }
          }
        }
      }
      // console.log('couponList',couponList)
      return couponList
    }
  },
  methods: {
    ...mapMutations(['saveCouponByPhone']),
    // 优惠券列表
    async getCouponByPhone() {
      let { brand, brand_id } = this.brandInfo
      const {
        data: { data, code }
      } = await couponByPhoneApi({
        // phone: '15920303048'
        phone: this.loginInfo?.phoneNumber,
        brand_id: brand_id
      })
      this.saveCouponByPhone(data)
      // this.couponByPhone = data
      // console.log('this.couponByPhone---', this.couponByPhone)
    },
    onClickTab(i) {
      this.currIndex = i
    },
    // 详情页
    goCouponDetail(item) {
      // if (!item?.couponRelations || !item.couponRelations.length) {
      //   return uni.$showMsg('该卡没有券，请先购买！')
      // }
      wx.navigateTo({
        url: `/Shop/CouponDetail?info=${encodeURIComponent(
          JSON.stringify(item)
        )}`
      })

      console.log(item)
    },
    goCardsReg() {
      uni.navigateTo({
        url: `/Shop/CardsReg`
      })
    },
    // 联系客服
    canvasShow() {
      // let {
      //   name,
      //   qyQr_url,
      //   avatar_url,
      //   department
      // } = this.goodsDetail?.cu_service
      // let comName = this.comName
      let baseUrl = `${this.baseUrl}/images/audi/service/` // 头像
      this.posInfo = {
        textHead: `广州锦龙客服`,
        imageHead: `${baseUrl}168361608206136656533633363323333.jpg`,
        imageBody: `${baseUrl}168361607493132396430623034373061.jpg`,
        textRank: `@广州锦龙`,
        titleRank: `您好,我是广州锦龙的客服人员`
        // textHead: `${name}`,
        // imageHead: `${baseUrl}${avatar_url}`,
        // imageBody: `${baseUrl}${qyQr_url}`,
        // textRank: `@${comName}`,
        // titleRank: `您好,我是${comName}的${department}`
      }
      let tempTimeOut = setTimeout(() => {
        this.$refs.mycanvas.init() //绘制画布
        clearTimeout(tempTimeOut)
      }, 80)
    },
    // 到客服列表
    goContact() {
      this.canvasShow()
      setTimeout(() => {
        this.$refs.mycanvas.canvasGet()
      }, 400)
      this.show = true
    }
  },
  watch: {},
  // 页面周期函数--监听页面加载
  onLoad() {
    // 获取优惠券列表
    this.getCouponByPhone()
    this.shareMixin.title = `卡券列表`
    this.shareMixin.path = `/pages/Shop/ShopAdmin`
  }
}
</script>

<style scoped lang="scss">
.couponList-box {
  padding-top: 30rpx;
  height: 100%;
  background-color: #f7f7f7;
}

.couponList-tips {
  padding: 6rpx 30rpx 6rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: $theme-color;

  &.text {
    padding: 40rpx;
    font-size: 30rpx;
    text-align: center;
    color: #333;
  }
}

.couponList {
  margin: 20rpx 30rpx 30rpx;
  padding: 30rpx;
  border: 1px solid #eee;
  border-radius: 20rpx;
  color: #222;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0px rgba(25, 3, 3, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 1;

  &__top {
    padding-bottom: 20rpx;
    display: flex;
    color: #111;
    justify-content: space-between;
    align-content: center;
    width: 100%;
    font-weight: 600;

    &__name {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 50%;
      font-size: 24rpx;
      color: $theme-color;

      i {
        display: inline-block;
        font-size: 26rpx;
        color: #222;
      }
    }

    &__id {
      font-size: 32rpx;
      font-weight: 600;
    }

    &__num {
      font-family: 'Audi-type', 'Microsoft JhengHei' !important;
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      background: $theme-color;
      position: absolute;
      top: -90rpx;
      right: -90rpx;
      z-index: 2;

      span {
        font-size: 34rpx;
        color: #fff;
        position: absolute;
        width: 110rpx;
        height: 110rpx;
        line-height: 90rpx;
        text-align: center;
        bottom: 0;
        left: 8rpx;

        i {
          font-size: 24rpx;
          display: inline-block;
        }
      }
    }
  }

  &__main {
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    min-height: 120rpx;

    &__left {
      flex: 1;

      &__text {
        font-weight: 600;
        font-size: 28rpx;
        line-height: 60rpx;
        position: relative;
        margin-left: 20px;
      }

      &__text::before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        background: $theme-color;
        border-radius: 50%;
        margin-right: 6px;
        position: absolute;
        left: -24rpx;
        top: 26rpx;
      }
    }

    &__right {
      width: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &__tips {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200rpx;
    }
  }

  &__bottom {
    padding-top: 20rpx;
    border-top: #eee solid 1px;
    font-size: 24rpx;
  }
}

.couponList-bottom {
  padding-top: 30rpx;
  display: flex;
  justify-content: center;
  text-align: center;

  .couponList-bottom__btn {
    padding: 16rpx 22rpx;
    width: 260rpx;
    color: #fff;
    background: $theme-color;
    font-size: 30rpx;
    border-radius: 10rpx;
    border: 2rpx solid #dd444c;

    &:nth-last-child(1) {
      margin-left: 40rpx;

    }
  }
}

.popup_inner {
  padding: 50rpx 40rpx 20rpx 40rpx;
}
</style>
